<template>
    <div>
       <van-search shape="round" v-model="value" @click="$router.push('/Type/SearchPopup')" placeholder="请输入搜索关键词" />
       <van-sidebar v-model="activeKey" @change="onChange">
         <van-sidebar-item v-for="(v,k) in categoryList" :key="v.id" :title="v.name" />
       </van-sidebar>
       <typepage :currentCategory="currentCategory"></typepage>
       <transition name="slide">
            <router-view></router-view>
       </transition>
       
    </div>
</template>

<script>
import Typepage from '@/components/Typepage'
import { Notify } from 'vant';
import Vue from 'vue';
Vue.use(Notify)
import {GetType,GetCurrentpage} from '@/request/api.js'
export default {
  data() {
    return {
      value: '',
      activeKey:0,
      categoryList:'',
      listid:[],
      currentCategory:''
    }
  },
  components:{
    Typepage
  },
  methods:{
     onChange(index){
         GetCurrentpage({id:this.listid[index]}).then(res=>{
              console.log(res);
              this.currentCategory=res.data.currentCategory
         })
     }
  },
  created(){ 
     GetType().then(res=>{
       console.log(res);
       this.categoryList=res.data.categoryList
       this.categoryList.forEach(item => {
             this.listid.push(item.id);
       });
       console.log(this.listid);
       GetCurrentpage({id:this.listid[0]}).then(res=>{
              console.log(res);
              this.currentCategory=res.data.currentCategory
         })
        
      })
    
  }
}
</script>

<style lang="less">
 .slide-enter{
    right: -100%;
  }
   
  .slide-enter-active{
    transition: all .5s;
  }
  .slide-enter-to{
    right: 0;
  }

  .slide-leave{
    right: 0;
  }
  .slide-leave-active{
    transition: all .5s;
  }
  .slide-leave-to{
    right: -100%;
  }
  
</style>